<script setup lang='ts'>
import { UeViewer } from 'xbsj-xe2/dist-node/xe2-ue-objects';
import Picking from "./cousePicking/Picking.vue"
import { XbsjEarthUi } from '../../scripts/xbsjEarthUi';
import Button from '../../components/Button.vue';
import { inject, onBeforeUnmount, onMounted, ref } from 'vue';
import RightList from '../../components/RightList.vue';
import { ES3DTileset } from 'esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main';
const xbsjEarthUi = inject('xbsjEarthUi') as XbsjEarthUi
const mousePick = ref(false)
const checkedColor = ref('rgba(255,0,0,1)')
const propertyIsShow = ref(false)
const destroyClick = () => {
    if (dispose) {
        dispose()
        dispose = null
    }
}
let dispose: any = null
let sceneobject: ES3DTileset
onMounted(() => {
    const update = () => {
        const viewer = xbsjEarthUi.activeViewer
        dispose = viewer?.clickEvent.don(async e => {
            if (!e.screenPosition) return
            if (!mousePick.value) return
            const result = await viewer.pick(e.screenPosition) as any
            if (!result) return
            console.log(result);


            //@ts-ignore
            if (viewer.innerViewer instanceof UeViewer) {
                const jsonStr = JSON.stringify(result.childPickedInfo, undefined, '    ');
                // if (result.sceneObject && result.sceneObject instanceof ES3DTileset) {
                //     sceneobject = result.sceneObject
                //     const id = result.childPickedInfo.uePickResult.features.id
                //     result.sceneObject.highlightFeature(id, checkedColor.value)
                //     console.log(id);
                // }
                if (propertyIsShow.value) return
                xbsjEarthUi.uePick = jsonStr
            } else {
                let list: any = []
                if (result.sceneObject && result.sceneObject instanceof ES3DTileset) {
                    sceneobject = result.sceneObject
                    const a = result.childPickedInfo.czmPickResult.getPropertyIds()
                    const flag = a.includes('id')
                    if (flag) {
                        const id = result.childPickedInfo.czmPickResult.getProperty('id')
                        result.sceneObject.highlightFeature(id, checkedColor.value)
                    }
                    if (propertyIsShow.value) return
                    if (result.childPickedInfo.czmPickResult) {
                        result.childPickedInfo.czmPickResult.getPropertyIds().forEach((item: any) => {
                            list.push({
                                name: item,
                                content: result.childPickedInfo.czmPickResult.getProperty(item)
                            })
                            xbsjEarthUi.cesiumPick = list
                        })
                    }
                }
            }
        })
    }
    update()
    const dispos = xbsjEarthUi.activeViewerChanged.disposableOnce(update)
    onBeforeUnmount(() => {
        dispos()
        destroyClick()
        if (sceneobject) {
            sceneobject.resetFeatureStyle()
        }
    })
})
const changeMousePick = () => {
    const viewer = xbsjEarthUi.activeViewer
    if (!viewer) return
    viewer.changeToMap()
    xbsjEarthUi.roamMode = 'Map'
    mousePick.value = !mousePick.value
    if (!mousePick.value) {
        if (sceneobject) {
            sceneobject.resetFeatureStyle()
        }
    }
}
const ok = (rgba: string) => {
    checkedColor.value = rgba
}
</script>

<template>
    <RightList :title="'鼠标拾取'">
        <Button :name="'shubiaoshiqu'" :content="'鼠标拾取'" :click="changeMousePick" :actived="mousePick"
            :left-button="true"></Button>
        <Picking v-if="mousePick" @ok="ok" :checkedColor="checkedColor" :propertyIsShow=propertyIsShow
            @changeProp="propertyIsShow = !propertyIsShow"></Picking>
    </RightList>
</template>
